<script setup lang="ts">
import { ref } from 'vue';

const foods = ref(['火锅','烤肉','水煮鱼','麻辣烫']);

const obj = ref({
  name: '张三',
  age: 18
})

</script>


<template>
  <!-- 列表渲染 -->
  <!-- :key="item"  作用：给列表项添加的唯一标识。便于Vue进行列表项的正确排序复用。 -->
 <p v-for="(item,index) in foods" :key="index">{{index + 1}}.{{item}}</p>

 <!-- ul 无序列表 -->
 <ul>
  <li v-for="item in foods">{{ item }}</li>
 </ul>

 <!-- ol 有序列表 -->
 <ol>
  <li v-for="item in foods" :key="item">{{ item }}</li>
 </ol>

 <ol>
   <!-- 通过 Array.from({ length: 5 }) 生成固定长度的数组，用于生成指定数量的测试结构 -->
  <li v-for="item in Array.from({length:5})">测试</li>
 </ol>

 <ol>
  <!-- 循环数字，可以快速生成指定数量的测试结构，比 Array.from({ length: 5 }) 方便 -->
  <li v-for="item in 5">测试</li>
 </ol>

 <ul>
  <!-- 支持对象循环遍历，遍历对象的键值对，了解即可 -->
  <li v-for="(item,key,index) in obj">{{ index }} {{ key }} : {{ item }}</li>
 </ul>
</template>

<style>

</style>